<template>
  <div class="search-container">
    <div class="header">
      <!-- 添加靠左的点击事件的箭头 -->
      <div class="header-arrow" @click="handleArrowClick">
        <span class="arrow-icon">&lt;</span>
      </div>
      <div class="header-title">
        <span class="title">酒店</span>
      </div>
      <!-- 添加靠右的点击事件的爱心和定位图标 -->
      <div class="header-actions">
        <span class="heart-icon" @click="handleHeartClick">♥</span>
        <span class="location-icon" @click="handleLocationClick">📍</span>
      </div>
    </div>
    <div class="search-input-box">
      <input type="text" placeholder="你想去哪儿?" v-model="searchText" class="search-input custom-input">
      <!--            <el-input-->
      <!--                placeholder="你想去哪儿?"-->
      <!--                prefix-icon="el-icon-search"-->
      <!--                class="search-input custom-input"-->
      <!--                v-model="searchText"-->
      <!--            />-->
    </div>
    <div class="search-history-section">
      <div class="history-title">
        <span>搜索历史</span>
        <span class="delete-all" @click="deleteAllHistory">删除全部</span>
      </div>
      <div class="history-list">
        <div class="history-item" v-for="(item, index) in filteredHistoryList" :key="index" @click="selectHistory(item)">
          <img :src="item.image" alt="history" class="history-item-img">
          <div class="history-item-info">
            <p class="location">{{ item.location }}</p>
            <p class="details">{{ item.details }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      historyList: [
        {
          image: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/02/00/Cg-4WVVxDyCIKnU-AAQxnMGr9K0AAEryAA_QZEABDG0238.jpg', // 替换为实际图片地址
          location: '伦敦London',
          details: '1间 - 2人\n12 - 22 3月'
        },
        {
          image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.9Kw-HtIOCE48e2c2zrXLpAHaEo?rs=1&pid=ImgDetMain', // 替换为实际图片地址
          location: '巴黎Paris',
          details: '1间 - 2人\n12 - 22 3月'
        },
        {
          image: 'https://img1.qunarzz.com/travel/poi/1505/e4/18fdf20f5edf1e.jpg', // 替换为实际图片地址
          location: '东京Tokyo',
          details: '1间 - 2人\n12 - 22 3月'
        },
        {
          image: 'https://img1.pconline.com.cn/piclib/200906/15/batch/1/35358/12450297668892ql6x9sgvx.jpg',
          location: '夏威夷Hawaii',
          details: '1间 - 2人\n12 - 22 3月'
        }
      ]
    };
  },
  computed: {
    filteredHistoryList() {
      if (!this.searchText) {
        return this.historyList;
      }
      return this.historyList.filter(item =>
          item.location.toLowerCase().includes(this.searchText.toLowerCase()) ||
          item.details.toLowerCase().includes(this.searchText.toLowerCase())
      );
    }
  },
  methods: {

    deleteAllHistory() {
      this.historyList = [];
      console.log('删除所有搜索历史');
    },
    selectHistory(item) {
      // 选择搜索历史项的逻辑，比如填充搜索框等
      this.searchText = item.location;
      console.log('选择搜索历史:', item.location);
    },
    fanhui() {
      this.$router.push('homepage');
    },
    // 新增箭头点击事件处理函数
    handleArrowClick() {
      console.log('箭头被点击了');
      this.$router.go(-1);
    },
    // 新增爱心点击事件处理函数
    handleHeartClick() {
      console.log('爱心图标被点击了');
      this.$router.push('/travel')
    },
    // 新增定位图标点击事件处理函数
    handleLocationClick() {
      console.log('定位图标被点击了');
      this.$router.push('/map')
    }
  }
};
</script>

<style scoped>
.search-container {
  padding: 20px;
  background-color: #fff;
}

/* 头部标签页样式修改 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed; /* 固定定位 */
  top: 0; /* 距离顶部0 */
  left: 0; /* 距离左边0 */
  width: 100%; /* 宽度100% */
  border: none; /* 取消边框 */
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保在最上层 */
  height: 100px;
}

.header-arrow {
  margin-left: 20px;
  cursor: pointer;
}

.header-title {
  flex: 1;
  text-align: center;
  margin-left: 30px;
}

.header-actions {
  flex: 0;
  display: flex;
  align-items: center;
}

.close-icon {
  font-size: 24px;
  cursor: pointer;
}

.heart-icon,
.location-icon {
  font-size: 24px;
  margin-right: 10px;
  cursor: pointer;
}

.search-input-box {
  position: relative;
  margin-bottom: 20px;
  margin-top: 80px; /* 增加顶部间距，避免被头部遮挡 */
}

.search-input {
  width: 85%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 40px;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #999;
}

.custom-input {
  border-radius: 25px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 底部阴影 */
}

.search-history-section {
  width: 100%;
}

.history-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #333;
}

.delete-all {
  color: #00c6ff;
  cursor: pointer;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.history-item {
  width: 32%;
  margin-bottom: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}

.history-item-img {
  width: 100%;
  display: block;
}

.history-item-info {
  padding: 10px;
}

.location {
  font-size: 16px;
  margin-bottom: 5px;
}

.details {
  font-size: 14px;
  color: #666;
}

.title {
  font-size: 30px;
  font-weight: bold;

}
</style>